﻿<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            
            $("#jqxcheckbox").jqxCheckBox({ width: 120, height: 25});
            $("#button").jqxButton({ width: 100, height: 25});

             var Model = function (checked) {
                this.checked = ko.observable(checked);
            };

            var model = new Model(true);

            // Register a binding for checkbox.
            ko.bindingHandlers.change = {
                init: function (element, valueAccessor) {
                    var value = valueAccessor();
                    $("#jqxcheckbox").jqxCheckBox('checked', value());
                    $(element).on('change', function (event) {
                        value(event.args.checked);
                    });
                }
            };

            ko.applyBindings(model);

            $("#button").click(function () {
                alert("Checked: " + model.checked());
            });
        });
    </script>
</head>
<body class='default'>
    <div data-bind="change: checked" id="jqxcheckbox">
        CheckBox</div>
     <input id="button" type="button" value="Get Value" />
</body>
</html>
